<template>
  <div class="question">
    <!-- 顶部表格 -->
    <el-card>
      <!-- 顶部格栅 -->
      <el-row :gutter="20">
        <el-col :span="6">
          学科
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-col>
        <el-col :span="6">
          阶段
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-col>
        <el-col :span="6">
          企业
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-col>
        <el-col :span="6">
          题型
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-col>
      </el-row>
      <el-row class="medium">
        <el-col :span="6">
          难度
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-col>
        <el-col :span="6">
          <span> 作者</span>
          <el-input v-model="authorIput" class="author" />
        </el-col>
        <el-col :span="6">
          状态
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-col>
        <el-col :span="6">
          日期
          <el-date-picker
            v-model="curDate"
            type="date"
            placeholder="选择日期"
          />
        </el-col>
      </el-row>
      <!-- 搜索 -->
      <div class="title">
        标题
        <el-input class="search" />
        <el-button type="primary">搜索</el-button>
        <el-button type="plain">清除</el-button>
        <el-button type="primary" @click="add">新增试题</el-button>
      </div>
    </el-card>
    <!-- 底部展示表格 -->
    <el-card>
      <el-table :data="tableData">
        <el-table-column type="index" label="序号" />
        <el-table-column label="题目" prop="title" />
        <el-table-column label="学科.阶段" prop="step" />
        <el-table-column label="题型" prop="type" />
        <el-table-column label="企业" prop="enterprise" />
        <el-table-column label="创建者" prop="username" />
        <el-table-column label="状态" prop="status" />
        <el-table-column label="访问量" prop="reads" />
        <el-table-column label="操作">
          <template>
            <el-button type="text">编辑</el-button>
            <el-button v-if="activeBtn" type="text">禁用</el-button>
            <el-button v-else type="text">启用</el-button>
            <el-button type="text">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        style="text-align: right; margin-top: 10px"
        :current-page="page.page"
        :page-sizes="[1, 5, 10, 50, 100, 200, 300, 400]"
        :page-size="page.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <!-- add -->
    <Add ref="add" />
  </div>
</template>

<script>
import { questionList } from '@/api/questiion'
import jsCookie from 'js-cookie'
import Add from './componens/Add.vue'
export default {
  components: {
    Add
  },
  data() {
    return {
      value: '',
      authorIput: '',
      curDate: '',
      options: [
        {
          value: '选项1',
          label: '黄金糕'
        },
        {
          value: '选项2',
          label: '双皮奶'
        }
      ],
      tableData: [{}],

      total: 100,
      page: {
        title: '', //	否	string	标题名称
        subject: '', //	否	int	学科id
        enterprise: '', //	否	int	企业id
        type: '', //	否	int	题目类型:1(单选),2(多选),3(简答)
        step: '', //	否	string	题目阶段:1(初级),2(中级),3(高级)
        username: '', //	否	string	作者
        status: '', //	否	int	状态:0(禁用),1(启用)
        difficulty: '', //	否	int	题目难度: 1(简单),2(一般),3(困难)
        create_date: '', //	否	string	创建日期
        page: 1, //	否	string	页码 默认为1
        limit: +jsCookie.get('question-size') || 1 //	否	string	页尺寸 默认为10
      },
      activeBtn: true
    }
  },
  created() {
    this.getData()
  },
  methods: {
    // 获取数据
    async getData() {
      const res = await questionList(this.page)
      this.tableData = res.data.items
      this.total = res.data.pagination.total
      console.log(res)
    },
    handleSizeChange(size) {
      // console.log(`每页 ${val} 条`)
      this.page.limit = size
      jsCookie.set('question-size', size)
      this.getData()
    },
    handleCurrentChange(page) {
      // console.log(`当前页: ${val}`)
      this.page.page = page
      this.getData()
    },
    // 新增
    add() {
      this.$refs.add.isShow = true
    }
  }
}
</script>

<style lang="scss" scoped>
.question {
  .el-card {
    padding: 20px;
    .medium {
      margin: 20px 0;
      .author {
        width: 210px;
      }
    }

    .search {
      width: 600px;
      margin-right: 10px;
    }
  }
}
</style>
